<template>
  <view 
    v-if="visible" 
    class="recognition-modal-overlay"
    :class="{ 'fade-in': visible }"
    @click="handleMaskClick"
  >
    <view 
      class="recognition-modal-container"
      :class="[
        `type-${type}`,
        { 'modal-show': visible }
      ]"
      @click.stop
    >
      <!-- 图标区域 -->
      <view class="modal-icon-wrapper">
        <view class="modal-icon" :class="`icon-${type}`">
          <text class="icon-emoji">{{ type === 'success' ? '✅' : '❌' }}</text>
        </view>
      </view>

      <!-- 标题 -->
      <view class="modal-title">
        <text class="title-text">{{ title }}</text>
      </view>

      <!-- 内容区域 -->
      <view class="modal-content">
        <view v-if="type === 'success'" class="success-content">
          <view v-if="pickupCode" class="info-item">
            <text class="info-label">取件码</text>
            <text class="info-value highlight">{{ pickupCode }}</text>
          </view>
          <view v-if="expressCompany" class="info-item">
            <text class="info-label">快递公司</text>
            <text class="info-value">{{ expressCompany }}</text>
          </view>
          <view v-if="location" class="info-item">
            <text class="info-label">驿站位置</text>
            <text class="info-value">{{ location }}</text>
          </view>
          <view v-if="address" class="info-item">
            <text class="info-label">地址</text>
            <text class="info-value address-text">{{ address }}</text>
          </view>
        </view>
        <view v-else class="error-content">
          <text class="error-text">{{ message }}</text>
          <view v-if="type === 'error'" class="error-tips">
            <text class="tip-title">提示：</text>
            <text class="tip-item">• 确保短信中包含"取件码"或"取货码"关键词</text>
            <text class="tip-item">• 取件码应为3-12位数字或字母数字组合</text>
            <text class="tip-item">• 请复制完整的短信内容</text>
          </view>
        </view>
      </view>

      <!-- 按钮区域 -->
      <view class="modal-footer">
        <button 
          class="confirm-btn"
          :class="`btn-${type}`"
          @click="handleConfirm"
        >
          <text class="btn-text">{{ confirmText }}</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RecognitionResultModal',
  
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'success',
      validator: (value) => ['success', 'error'].includes(value)
    },
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    },
    pickupCode: {
      type: String,
      default: ''
    },
    expressCompany: {
      type: String,
      default: ''
    },
    location: {
      type: String,
      default: ''
    },
    address: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: '知道了'
    },
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  
  methods: {
    handleMaskClick() {
      if (this.maskClosable) {
        this.handleClose()
      }
    },
    
    handleClose() {
      // 确保事件正确触发
      try {
        this.$emit('update:visible', false)
        this.$emit('close')
      } catch (error) {
        console.error('关闭弹窗时出错:', error)
        // 如果事件触发失败，直接更新父组件状态
        this.$emit('update:visible', false)
      }
    },
    
    handleConfirm() {
      // 先触发确认事件，再关闭
      try {
        this.$emit('confirm')
        this.handleClose()
      } catch (error) {
        console.error('确认弹窗时出错:', error)
        // 如果事件触发失败，直接关闭
        this.$emit('update:visible', false)
      }
    }
  },

  watch: {
    // 监听 visible 属性变化，确保弹窗状态同步
    visible(newVal) {
      if (!newVal) {
        // 弹窗关闭时，确保所有状态清理
        this.$nextTick(() => {
          // 可以在这里添加清理逻辑
        })
      }
    }
  }
}
</script>

<style scoped>
/* 遮罩层 - 拟态效果 */
.recognition-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.recognition-modal-overlay.fade-in {
  opacity: 1;
}

/* 弹窗容器 - 拟态设计 */
.recognition-modal-container {
  width: 90%;
  max-width: 600rpx;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 32rpx;
  padding: 0;
  box-shadow: 
    0 20rpx 60rpx rgba(0, 0, 0, 0.15),
    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset,
    0 8rpx 16rpx rgba(0, 0, 0, 0.1) inset;
  transform: scale(0.9) translateY(20rpx);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.recognition-modal-container.modal-show {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* 成功类型 */
.recognition-modal-container.type-success {
  border-top: 4rpx solid #10b981;
}

/* 错误类型 */
.recognition-modal-container.type-error {
  border-top: 4rpx solid #ef4444;
}

/* 图标区域 */
.modal-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0 20rpx;
}

.modal-icon {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 8rpx 16rpx rgba(0, 0, 0, 0.1),
    0 0 0 1rpx rgba(255, 255, 255, 0.5) inset;
  animation: iconPulse 0.6s ease-out;
}

@keyframes iconPulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-icon.icon-success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

.modal-icon.icon-error {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.icon-emoji {
  font-size: 64rpx;
}

/* 标题 */
.modal-title {
  text-align: center;
  padding: 0 40rpx 20rpx;
}

.title-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #1f2937;
  letter-spacing: 1rpx;
}

/* 内容区域 */
.modal-content {
  padding: 0 40rpx 30rpx;
  max-height: 70vh; /* 增加最大高度，确保更多内容可见 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */
  scrollbar-width: thin; /* Firefox滚动条样式 */
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox滚动条颜色 */
}

/* 成功内容 */
.success-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx;
  background: linear-gradient(145deg, #f9fafb 0%, #ffffff 100%);
  border-radius: 16rpx;
  box-shadow: 
    0 2rpx 8rpx rgba(0, 0, 0, 0.05),
    0 0 0 1rpx rgba(0, 0, 0, 0.05) inset;
}

.info-label {
  font-size: 26rpx;
  color: #6b7280;
  min-width: 140rpx;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #1f2937;
  flex: 1;
  word-break: break-all;
}

.info-value.highlight {
  font-size: 32rpx;
  font-weight: bold;
  color: #667eea;
  letter-spacing: 2rpx;
}

.address-text {
  font-size: 24rpx;
  color: #4b5563;
  line-height: 1.6;
}

/* 错误内容 */
.error-content {
  text-align: center;
}

.error-text {
  font-size: 28rpx;
  color: #1f2937;
  line-height: 1.8;
  display: block;
  margin-bottom: 30rpx;
  white-space: pre-wrap; /* 确保换行符正常显示 */
  word-break: break-word; /* 确保长单词正确换行 */
  max-height: 40vh; /* 限制最大高度但留出足够空间 */
  overflow-y: auto; /* 当内容过长时显示滚动条 */
  padding: 10rpx; /* 增加内边距避免文本紧贴边缘 */
}

.error-tips {
  text-align: left;
  background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 
    0 2rpx 8rpx rgba(0, 0, 0, 0.05),
    0 0 0 1rpx rgba(245, 158, 11, 0.2) inset;
}

.tip-title {
  font-size: 26rpx;
  font-weight: bold;
  color: #92400e;
  display: block;
  margin-bottom: 12rpx;
}

.tip-item {
  font-size: 24rpx;
  color: #78350f;
  line-height: 1.8;
  display: block;
  margin-bottom: 8rpx;
}

.tip-item:last-child {
  margin-bottom: 0;
}

/* 按钮区域 */
.modal-footer {
  padding: 30rpx 40rpx 40rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
}

.confirm-btn {
  width: 100%;
  height: 88rpx;
  border-radius: 20rpx;
  border: none;
  font-size: 30rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 8rpx 16rpx rgba(0, 0, 0, 0.15),
    0 0 0 1rpx rgba(255, 255, 255, 0.3) inset;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 
    0 4rpx 8rpx rgba(0, 0, 0, 0.15),
    0 0 0 1rpx rgba(255, 255, 255, 0.3) inset;
}

.confirm-btn.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.confirm-btn.btn-error {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.btn-text {
  font-size: 30rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
}

/* 滚动条优化 */
.modal-content::-webkit-scrollbar {
  width: 8rpx; /* 增加滚动条宽度，使其更容易点击 */
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* 加深滚动条颜色，提高可见性 */
  border-radius: 4rpx;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05); /* 添加浅色背景，使滚动条更明显 */
  border-radius: 4rpx;
}
</style>

